<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
<!--左侧导航-->
      <!-- <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['0']" router="router">
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
            <template slot="title"><i class="el-icon-menu"></i>{{item.name}}</template>
            <el-menu-item-group>
              <el-menu-item  v-for="(item2,index2) in item.children" :index="item2.path">{{item2.name}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
      </el-aside> -->
      <!-- 侧边栏组件 -->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <!-- 菜单组件 -->
    <el-menu :default-openeds="['0']" :router="true">
      <!-- <el-menu :default-openeds="['0']" :router="hua"> -->
        <!--  -->
      
        <!-- 遍历路由配置中的每一个顶级路由项 -->
        <el-submenu v-for="(item, index) in $router.options.routes" :key="index" :index="index.toString()">
            <!-- 子菜单标题模板 -->
            <template slot="title">
                <i class="el-icon-menu"></i>{{ item.name }}
            </template>
            <!-- 子菜单项组 -->
            <el-menu-item-group>
                <!-- 遍历每一个子路由项 -->
                <el-menu-item v-for="(item2, index2) in item.children" :key="index2" :index="item2.path">
                    {{ item2.name }}
                </el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</el-aside>
<!--右侧内容-->
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <span>花飞</span>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>



<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
import router from '@/router';

export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item)
    }
  }
};
</script>
